import React from 'react';
import { Form, Input, Modal, Select,  Radio } from 'antd';




const { Option } = Select;
const FormItem = Form.Item;

export interface CreateFormProps {
  modalVisible: boolean;
  devicetype: API.DeviceTypeItem[];
  onSubmit: (values: API.SysDeviceAlarm) => void;
  onCancel: () => void;
}

const formLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 15 },
};

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const { modalVisible, onSubmit: handleAdd, onCancel ,devicetype} = props;
  const [form] = Form.useForm();
  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    handleAdd(fieldsValue);
    form.resetFields();
  };

  return (
    <Modal
      width={640}
      maskClosable={false}
      destroyOnClose
      title="新增报警规则"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <Form
        {...formLayout}
        form={form}
      >
         <FormItem
            label="设备类型"
            name="deviceTypeId"
          //  rules={[{ required: true, message: '请选择设备类型' }]}
          >
            <Select placeholder="请选择">
              {devicetype.map((item) => (
                <Option key={item.typeId} value={item.typeId}>
                  {item.typeName}
                </Option>
            ))}
            </Select>
          </FormItem>
          <FormItem
          label="设备品牌"
          name="deviceBrand"
          rules={[{ message: '请输入至少二个字符！', min: 2 }]}
          >
            <Input placeholder="请输入" autoComplete='off' />
          </FormItem>
          <FormItem
          label="设备型号"
          name="deviceModel"
          rules={[{  message: '请输入至少二个字符！', min: 2 }]}
          >
            <Input placeholder="请输入" autoComplete='off' />
          </FormItem>
          <FormItem
          label="报警级别"
          name="alarmLevel"
          initialValue={802}
        >
           <Radio.Group defaultValue={0}>
            <Radio value={802} >
              报警
            </Radio>
            <Radio value={803}>
              故障
            </Radio>
          </Radio.Group>
        </FormItem>
        <FormItem
          label="报警/故障代码"
          name="alarmCode"
          rules={[{ required: true, max: 255, min: 2 }]}
        >
          <Input placeholder="请输入" autoComplete='off' />
        </FormItem>
        <FormItem
          label="报警/故障名称"
          name="alarmDes"
          rules={[{ required: true, max: 255, min: 2 }]}
        >
          <Input placeholder="请输入" autoComplete='off' />
        </FormItem>
        <FormItem
          label="启用状态"
          name="useState"
          initialValue={0}
        >
          <Radio.Group defaultValue={0}>
            <Radio value={1} >
              启用
            </Radio>
            <Radio value={0}>
              禁用
            </Radio>
          </Radio.Group>
        </FormItem>
        <FormItem
          label="可能原因"
          name="alarmReason"
        >
          <Input.TextArea rows={3}   maxLength={200}  placeholder="请输入" />
        </FormItem>
        <FormItem
          label="处理建议"
          name="handleOpinions"
        >
          <Input.TextArea rows={3}   maxLength={200}  placeholder="请输入" />
        </FormItem>
      </Form>
    
    </Modal>
  );
};

export default CreateForm;
